<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <link rel="stylesheet" href="lib/reset.css">
    <script src="lib/jquery.min.js"></script>
</head>
<body>
<style>
    .main {
        height: 400px;
        margin: 10px 0 80px 0;
    }

    .label {
        background: #ddd;
        line-height: 30px;
        font-weight: bold;
        text-align: center;
    }
</style>
<div class="label">Color Alpha in scatter (using outOfRange as 'selected')</div>
<div class="main" id="main1"></div>
<div class="label">Opacity in bar (label color specified)</div>
<div class="main" id="main2"></div>
<div class="label">Opacity in scatter (label color specified)</div>
<div class="main" id="main3"></div>
<div class="label">Opacity in graph (label color specified)</div>
<div class="main" id="main4"></div>
<div class="label">Opacity in heatmap (inactive color default using opacity)</div>
<div class="main" id="main5"></div>
<div class="label">Opacity in pie (label color and label line color specified)</div>
<div class="main" id="main6"></div>


<!-- ALPHA SCATTER -->


<script type="text/javascript">

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/visualMapPiecewise'
    ], function (echarts) {

        var main = document.getElementById('main1');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var data1 = [];
        var data2 = [];
        var data3 = [];

        var symbolCount = 6;

        for (var i = 0; i < 100; i++) {
            data1.push([
                Math.random() * 5,
                Math.random() * 4,
                Math.random() * 20,
                Math.round(Math.random() * (symbolCount - 1))
            ]);
            data2.push([
                Math.random() * 10,
                Math.random() * 5,
                Math.random() * 20,
                Math.round(Math.random() * (symbolCount - 1))
            ]);
            data3.push([
                Math.random() * 15,
                Math.random() * 10,
                Math.random() * 20,
                Math.round(Math.random() * (symbolCount - 1))
            ]);
        }

        chart.on('click', function (params) {
            console.log(params);
        });

        chart.setOption({
            color: ['#bcd3bb', '#928ea8', '#edc1a5'],
            legend: {
                data: ['scatter', 'scatter2', 'scatter3']
            },
            grid: {
                top: 50,
                bottom: 30
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            visualMap: [
                {
                    type: 'piecewise',
                    splitNumber: 6,
                    left: 'right',
                    bottom: 30,
                    // selectedMode: 'single',
                    selectedMode: 'multiple',
                    selected: {
                        0: false, 1: false, 2: false, 3: false, 4: false, 5: false
                    },
                    dimension: 'value',
                    min: 0,
                    max: 24,
                    precision: 0,
                    inRange: { // visual for short cut
                        color: ['rgb(20,1,0)'],
                        symbolSize: [40, 5]
                    },
                    outOfRange: {
                        colorAlpha: [0.3, 1],
                        symbolSize: [40, 5]
                    }
                }
            ],
            series: [
                {
                    name: 'scatter',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: data1
                },
                {
                    name: 'scatter2',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: data2
                },
                {
                    name: 'scatter3',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: data3
                }
            ]
        });

        window.addEventListener('resize', function () {
            chart.resize();
        });
    });
</script>


<!-- OPACITY BAR -->


<script>

    require([
        'echarts'
        // 'echarts/chart/bar',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/toolbox',
        // 'echarts/component/visualMap',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var main = document.getElementById('main2');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var data4 = [];

        var DATA_MAX = 5.5;

        for (var i = 0; i < 10; i++) {
            xAxisData.push('类目' + i);
            data1.push((Math.random() * DATA_MAX).toFixed(2));
            data2.push(-Math.random().toFixed(2));
            data3.push((Math.random() + 0.5).toFixed(2));
            data4.push((Math.random() + 0.3).toFixed(2));
        }

        var labelStyle = {
            normal: {
                show: true,
                position: 'outside',
                textStyle: {
                    color: '#333'
                }
            }
        };

        var itemStyle = {
            normal: {},
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        };

        chart.setOption({
            legend: {
                data: ['bar', 'bar2', 'bar3'],
                align: 'left'
            },
            toolbox: {
                // y: 'bottom',
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    dataView: {}
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                axisLine: {
                    onZero: true
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                splitArea: {
                    show: false
                },
                max: 6,
                min: -2
            },
            visualMap: [
                {
                    type: 'continuous',
                    right: 0,
                    itemWidth: 15,
                    bottom: 30,
                    dimension: 1,
                    calculable: true,
                    min: -2,
                    max: DATA_MAX,
                    precision: 2,
                    inRange: {
                        opacity: [1, 1] // Using opacity when label color specified
                    },
                    controller: {
                        inRange: {
                            color: '#888'
                        },
                        outOfRange: {
                            color: '#888'
                        }
                    },
                    outOfRange: {
                        opacity: [0.2, 0.2] // Using opacity when label color specified
                    }
                }
            ],
            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    label: labelStyle,
                    data: data1
                },
                {
                    name: 'bar2',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    label: labelStyle,
                    data: data2
                },
                {
                    name: 'bar3',
                    type: 'bar',
                    itemStyle: itemStyle,
                    label: labelStyle,
                    data: data3
                }
            ]
        });

        window.addEventListener('resize', function () {
            chart.resize();
        });
    });
</script>


<!-- OPACITY SCATTER -->


<script type="text/javascript">

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/visualMapPiecewise'
    ], function (echarts) {

        var main = document.getElementById('main3');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var data1 = [];

        var symbolCount = 6;

        for (var i = 0; i < 100; i++) {
            data1.push([
                Math.random() * 5,
                Math.random() * 4,
                +(Math.random() * 20).toFixed(2),
                Math.round(Math.random() * (symbolCount - 1))
            ]);
        }

        chart.setOption({
            legend: {
                data: ['scatter', 'scatter2', 'scatter3']
            },
            grid: {
                top: 50,
                bottom: 30
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            visualMap: [
                {
                    type: 'piecewise',
                    splitNumber: 6,
                    left: 'right',
                    bottom: 30,
                    selectedMode: 'multiple',
                    dimension: 'value',
                    min: 0,
                    max: 24,
                    precision: 0,
                    inRange: { // visual for short cut
                        opacity: 1,
                        symbolSize: [15, 50]
                    },
                    outOfRange: {
                        opacity: 0.3,
                        symbolSize: [15, 50]
                    }
                }
            ],
            series: [
                {
                    name: 'scatter',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: '{@[2]}',
                            position: 'inside'
                        }
                    },
                    data: data1
                }
            ]
        });

        window.addEventListener('resize', function () {
            chart.resize();
        });
    });
</script>


<!-- OPACITY GRAPH -->

<script>

    require([
        'echarts',

        'extension/dataTool',

        // 'echarts/chart/graph',

        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/geo',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',

        'theme/vintage'
    ], function (echarts, dataTool) {
        var gexf = dataTool.gexf;
        var main = document.getElementById('main4');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        $.get('./data/les-miserables.gexf', function (xml) {
            var graph = gexf.parse(xml);
            var categories = [];
            for (var i = 0; i < 9; i++) {
                categories[i] = {
                    name: '类目' + i
                };
            }
            graph.nodes.forEach(function (node) {
                delete node.itemStyle;
                node.value = node.symbolSize;
                node.label = {
                    normal: {
                        show: node.symbolSize > 30
                    }
                };
                node.category = node.attributes['modularity_class'];
            });
            graph.links.forEach(function (link) {
                delete link.lineStyle;
            });
            var option = {
                tooltip: {},
                legend: [{
                    // selectedMode: 'single',
                    data: categories.map(function (a) {
                        return a.name;
                    })
                }],
                visualMap: {
                    min: 0,
                    max: 100,
                    dimension: 0,
                    calculable: true,
                    inRange: {
                        opacity: 1,
                        symbolSize: [10, 100]
                    },
                    outOfRange: {
                        opacity: 0.2,
                        symbolSize: [10, 100]
                    }
                },
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        name: 'Les Miserables',
                        type: 'graph',
                        layout: 'none',
                        data: graph.nodes,
                        links: graph.links,
                        categories: categories,
                        roam: true,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#333'
                                },
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        lineStyle: {
                            normal: {
                                curveness: 0.3
                            }
                        }
                    }
                ]
            };

            chart.setOption(option);

        });
    });
</script>


<!-- OPACITY HEATMAP -->

<script type="text/javascript">

    require([
        'echarts'
        // 'echarts/chart/heatmap',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMapPiecewise'
    ], function (echarts) {

        var main = document.getElementById('main5');
        if (!main) {
            return;
        }
        var chart = echarts.init(main, null, {});

        var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
            '7a', '8a', '9a', '10a', '11a',
            '12p', '1p', '2p', '3p', '4p', '5p',
            '6p', '7p', '8p', '9p', '10p', '11p'];
        var days = ['Saturday', 'Friday', 'Thursday',
            'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

        var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];

        data = data.map(function (item) {
            return [item[1], item[0], item[2] || '-'];
        });

        option = {
            backgroundColor: '#eee4ee',
            tooltip: {
                position: 'top'
            },
            animation: false,
            grid: {
                height: '50%',
                y: '10%'
            },
            xAxis: {
                type: 'category',
                data: hours
            },
            yAxis: {
                type: 'category',
                data: days
            },
            visualMap: {
                min: 1,
                max: 10,
                calculable: true,
                range: [3, 6],
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
            },
            series: [{
                name: 'Punch Card',
                type: 'heatmap',
                data: data,
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        chart.setOption(option);
    });
</script>


<!-- OPACITY HEATMAP -->

<script>
    require([
        'echarts'
        // 'echarts/chart/pie',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip'
    ], function (echarts) {

        var main = document.getElementById('main6');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        chart.setOption({
            legend: {
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            tooltip: {},
            visualMap: {
                type: 'continuous',
                top: 'middle',
                min: 0,
                max: 700,
                dimension: 1,
                calculable: true,
                inRange: {
                    color: ['yellow', 'green']
                }
            },
            series: [{
                name: 'pie',
                type: 'pie',
                selectedMode: 'single',
                selectedOffset: 30,
                clockwise: true,
                label: {
                    normal: {
                        textStyle: {
                            color: '#333'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: '#333'
                        }
                    }
                },
                data: [
                    {value: [335, 632], name: '直接访问'},
                    {value: [310, 434], name: '邮件营销'},
                    {value: [234, 233], name: '联盟广告'},
                    {value: [135, 544], name: '视频广告'},
                    {value: [1548, 381], name: '搜索引擎'}
                ]
            }]
        });
    });
</script>

</body>
</html>
